<template>
  <!-- 单张图片 -->
  <div
    v-if="typeof modelValue === 'string'"
    class="image-manager-icon"
    :style="{ width: width, height: height }"
    @click="handleOpenDialog"
  >
    <el-image v-if="modelValue" :src="modelValue" style="width: 100%; height: 100%;" />
    <el-icon v-else :size="20">
      <Picture />
    </el-icon>
  </div>
  <!-- 多张图片 -->
  <div
    v-if="(modelValue instanceof Array)"
    style="display: flex; flex-wrap: wrap; width: fit-content;"
    @click="handleOpenDialog"
  >
    <div
      class="image-manager-icon"
      v-for="img in modelValue"
      :key="img"
      :style="{ width: width, height: height }"
    >
      <el-image :src="img" style="width: 100%; height: 100%;" />
    </div>
    <div
      v-if="modelValue.length < 1"
      class="image-manager-icon"
      :style="{ width: width, height: height }"
    >
      <el-icon :size="20">
        <Picture />
      </el-icon>
    </div>
  </div>
  <el-dialog v-model="visible" title="选择图片" :before-close="onClose" @open="onOpen" append-to-body>
    <div class="page-operation" style="display: flex;">
      <el-select
        v-model="imageListParams.pid"
        placeholder="请选择"
        style="margin-right: auto"
        @change="handleGetImageList"
      >
        <el-option
          v-for="item in imageTypeList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-button type="primary">Upload Image</el-button>
      <el-button type="danger">Delete Image</el-button>
    </div>
    <h3 style="margin-bottom: var(--space-medium);">All Image</h3>
    <div style="display: flex; flex-wrap: wrap;">
      <div
        v-for="img in imageList"
        class="image-manager-item"
        :key="img.att_id"
        :disabled="(modelValue instanceof Array) && imageCart.length >= max && !imageCart.includes(img.att_dir)"
        @click="handleCheckImage(img)"
      >
        <el-image :src="img.att_dir" style="width: 100px; height: 100px;" fit="contain" />
        <div class="image-manager-item-checkbox" v-if="imageCart.includes(img.att_dir)">
          <el-icon :size="16">
            <CircleCheckFilled />
          </el-icon>
        </div>
      </div>
    </div>
    <el-empty v-if="imageList.length < 1" :image-size="50"></el-empty>
    <Pagination
      v-model:index="imageListParams.page"
      v-model:size="imageListParams.limit"
      :total="imageListCount"
      :on-change="handleGetImageList"
    />
    <h3 style="margin-bottom: var(--space-medium);">Selected Image</h3>
    <div style="display: flex; flex-wrap: wrap;">
      <div class="image-manager-item" v-for="img in imageCart" @click="handleUncheckImage(img)">
        <el-image :src="img" style="width: 100%; height: 100%;" fit="contain"></el-image>
      </div>
    </div>
    <el-empty v-if="imageCart.length < 1" :image-size="50"></el-empty>
    <template #footer>
      <el-button
        type="primary"
        :disabled="imageCart.length < 1"
        @click="handleSubmit"
      >Use the Selected Image</el-button>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { Picture } from '@element-plus/icons'
import { ref } from 'vue'
import { CircleCheckFilled } from '@element-plus/icons'
import { getImageList, getImageTypeList } from '@/api/image'
import Pagination from '@/components/pagination/index.vue'

interface PropsType {
  modelValue: string | string[];
  width?: string;
  height?: string;
  max?: number;
  readonly?: boolean;
}

const props = withDefaults(defineProps<PropsType>(), {
  width: '100px',
  height: '100px',
  max: 1,
  readonly: false,
})

const visible = ref(false)

const imageList = ref<ImageType[]>([])

const imageListParams = ref({
  page: 1,
  limit: 10,
  pid: 0,
})
const imageListCount = ref(0)

function handleGetImageList() {
  getImageList(imageListParams.value).then(res => {
    imageList.value = res.list || []
    imageListCount.value = res.count || 0
  })
}

const imageTypeList = ref<{
  value: number;
  label: string;
}[]>([])

function handleGetImageTypeList() {

  getImageTypeList().then(res => {
    imageTypeList.value = res
  })

}

handleGetImageTypeList()

const imageCart = ref<string[]>([])

function handleCheckImage(image: ImageType) {
  if (imageCart.value.includes(image.att_dir)) {
    imageCart.value = imageCart.value.filter(item => item !== image.att_dir)
  } else {
    if (props.max === 1) {
      imageCart.value = [image.att_dir]
    } else if (imageCart.value.length < props.max) {
      imageCart.value.push(image.att_dir)
    }
  }
}

const emits = defineEmits(['update:modelValue'])

function onOpen() {
  handleGetImageList()

  if (typeof props.modelValue === 'string') {
    imageCart.value = props.modelValue ? [props.modelValue] : []
  } else if (props.modelValue instanceof Array) {
    imageCart.value = [...props.modelValue]
  }
}

function handleUncheckImage(img: string) {
  if (imageCart.value.length === 1) {
    imageCart.value = []
  } else {
    imageCart.value = imageCart.value.filter(item => item !== img)
  }
}

function handleSubmit() {
  emits('update:modelValue', typeof props.modelValue === 'string' ? imageCart.value[0] : imageCart.value)
  onClose()
}

function onClose() {
  imageCart.value = []
  imageListParams.value = {
    page: 1,
    limit: 10,
    pid: 0,
  }
  visible.value = false
}

function handleOpenDialog() {
  if (props.readonly) {
    return
  }
  visible.value = true
}
</script>
<style lang="scss">
.image-manager-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px dashed var(--el-border-color-base);
  border-radius: var(--el-border-radius-base);
  background-color: var(--el-color-white);
  cursor: pointer;
  box-sizing: border-box;
  overflow: hidden;
  &:hover {
    color: var(--el-color-primary);
    border-color: var(--el-color-primary);
  }
  + .image-manager-icon {
    margin-left: var(--space-small);
  }
}

.image-manager-item {
  width: 100px;
  height: 100px;
  padding: 0;
  border: none;
  margin-right: 10px;
  margin-bottom: 10px;
  border-radius: var(--el-border-radius-base);
  background-color: var(--el-color-white);
  cursor: pointer;
  box-shadow: var(--el-box-shadow-light);
  overflow: hidden;
  position: relative;
  &-checkbox {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 16px;
    height: 16px;
    line-height: 16px;
    color: var(--el-color-primary);
    background-color: var(--el-color-white);
    border-radius: 50%;
    border: 2px solid var(--el-color-white);
  }
  &[disabled="true"] {
    cursor: not-allowed;
    .el-image {
      opacity: 0.5;
    }
  }
}
</style>